<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>真哥商城管理平台</title> <#include "../common/header.ftl"/>
    <link rel="stylesheet"
          href="/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript"
            src="/js/plugins/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>

    <script type="text/javascript">
        var setting = {
            async: {
                enable: true,
                url: "/catalog/get",
                autoParam: ["id"]
            },
            callback: {
                onClick: zTreeOnClick
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {

            //给新增分类的模态框的父分类名设值
            $("#parentCatalog").val(treeNode.name);
            //给新增分类的模态框的父分类id设值
            $("#parentCatalogId").val(treeNode.id);

            $("#catalogPanel").load("/catalog/add/" + treeNode.id)
        };

        $(document).ready(function () {
            $.fn.zTree.init($("#catalogTree"), setting);

            $("#addButton").click(function () {

                $("#myModal").modal("show");
                $("#code").val("");
                $("#name").val("");
            });

            //添加分类
            $("#saveButton").click(function () {
                var form = $("#catalogSaveForm");
                $("#myModal").modal("hide");
                form.ajaxSubmit(function (data) {
                    if (data.success) {
                        $.messager.confirm("温馨提示", "保存成功!", function () {
                            $.fn.zTree.init($("#catalogTree"), setting);
                        });

                    } else {
                        $.messager.alert("提示", data.errorMsg);
                    }
                });
                return false;
            });

            //编辑分类属性
            $("#saveButton1").click(function () {
                var form = $("#catalogPropertyEditForm");
                $("#editModal").modal("hide");
                form.ajaxSubmit(function (data) {
                    if (data.success) {
                        $.messager.confirm("温馨提示", "保存成功!", function () {
                            $("#catalogPanel").html("");
                        });
                    } else {
                        $.messager.alert("提示", data.errorMsg);
                    }
                });
                return false;
            });

            //添加分类属性
            $("#saveButton2").click(function () {
                var form = $("#catalogPropertyAddForm");
                $("#addModal").modal("hide");
                form.ajaxSubmit(function (data) {
                    if (data.success) {
                        $.messager.confirm("温馨提示", "保存成功!", function () {
                            $("#catalogPanel").html("");

                        });
                    } else {
                        $.messager.alert("提示", data.errorMsg);
                    }
                });
                return false;
            });

        });


        //编辑分类属性
        function edit(id,name,type) {
            $("#propertyId").val(id);
            $("#propertyName").val(name);
            $("#propertyType").val(type);
            $("#editModal").modal("show");
        }

        //添加分类属性
        function addProperty(id) {
            $("#parentId").val(id);
            $("#addPropertyName").val("");
            $("#addPropertyType").val("");
            $("#addModal").modal("show");
        }

        //删除分类属性
        function deleteProperty(id){
            $.get("/catalogProperty/delete/" + id,
                    function (data) {
                        if(data.success){
                            $.messager.confirm("提示", "删除成功!", function () {
                                $("#catalogPanel").html("");
                            });
                        }else {
                            $.messager.popup(data.msg);
                        }
                    });
        }

        //修改分类
        function eidtCatalog() {
            var form = $("#catalogEditForm");
            form.ajaxSubmit(function (data) {
                if (data.success) {
                    $.messager.popup("修改成功");
                    $("#catalogPanel").load("/catalog/add/" + treeNode.id);
                } else {
                    $.messager.popup(data.errorMsg);
                }
            });
        }

        //删除分类
        function deleteCatalog(id) {
            $.get("/catalog/delete/" + id,
                    function (data) {
                        if (data.success) {
                            $.messager.confirm("提示", "删除成功!", function () {
                                $.fn.zTree.init($("#catalogTree"), setting);
                                $("#catalogPanel").html("");
                            });
                        } else {
                            $.messager.alert("提示", data.errorMsg);
                        }
                    }
            );
        }

        //属性值的展示
        function showProperty(id){
            $("#propertyValueModal").modal("show");

            //情况分类属性值模态框内容
            $("#catalogPropertyValueForm").empty();

            //重新通过分类属性ID或者分类属性值模态框内容
            $("#catalogPropertyValueForm").load("/catalogPropertyValue/get/"+id)

        }

        //提交分类属性值表单
        function submitValueForm(){
            var form = $("#catalogPropertyValueForm");
            $("#propertyValueModal").modal("hide");
                form.ajaxSubmit(function(data) {
                    if(data.success){
                        $.messager.confirm("温馨提示", "操作成功!", function () {
                            $("#catalogPanel").html("");
                        });
                    }else {
                        $.messager.popup(data.errorMsg);
                    }
                });
            return false;
        }

        //删除分类属性值input元素
        function deleteValue(obj,id){
            $(obj).parent().parent().remove();
            if(id != 0){
                $.ajax({
                    url:"/catalogPropertyValue/delete/"+id,
                    dataType:"json"
                })
            }
        }

        //添加分类属性值的input元素
        function addValue(){
            var valueDivTemplate = $("#valueDivTemplate").html();
            $("#valueDiv").append(valueDivTemplate);
        }

    </script>
</head>
<body>
<div class="container">
<#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3"><#assign currentMenu="catalog" />
				<#include "../common/menu.ftl" /></div>
        <div class="col-sm-9">


            <div class="page-header">
                <h3>分类管理</h3>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <button type="button" class="btn btn-primary" id="addButton">添加分类</button>
                    <ul id="catalogTree" class="ztree"></ul>
                </div>
                <div class="col-sm-8" id="catalogPanel">

                </div>
            </div>
        </div>
    </div>

    <!-- 添加分类模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加分类</h4>
                </div>
                <form action="/catalog/save" method="post" id="catalogSaveForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">上级分类</label> <input
                                type="hidden" name="parentCatalogId" id="parentCatalogId"/> <input
                                class="form-control" value="顶级分类" readonly="readonly"
                                id="parentCatalog">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">分类编号</label> <input
                                class="form-control" name="code" id="code"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">分类名</label> <input
                                class="form-control" name="name" id="name">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="saveButton">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 编辑分类属性模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">编辑属性</h4>
                </div>
                <form action="/catalogProperty/edit" method="post" id="catalogPropertyEditForm">
                    <input type="hidden" name="id" id="propertyId" value="">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">属性名称</label> <input
                                class="form-control" name="name" id="propertyName"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">属性类型</label>
                            <select class="form-control" name="type" id="propertyType">
                                <option value="0">文本</option>
                                <option value="2">下拉列表</option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="saveButton1">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加分类属性模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">编辑属性</h4>
                </div>
                <form action="/catalogProperty/add" method="post" id="catalogPropertyAddForm">
                    <input type="hidden" name="id" id="parentId" value="">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">属性名称</label> <input
                                class="form-control" name="name" id="addPropertyName"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">属性类型</label>
                            <select class="form-control" name="type" id="addPropertyType">
                                <option value="0">文本</option>
                                <option value="2">下拉列表</option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="saveButton2">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 新增分类属性值模态框 -->
<div class="modal fade" id="propertyValueModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">分类属性值</h4>
            </div>

            <!-- 提交添加分类属性值的表单 -->
            <form action="/catalogPropertyValue/add" method="post" id="catalogPropertyValueForm">

            </form>
        </div>
    </div>
</div>

<!-- 属性值的模板 -->
<script type="text/x-template" id="valueDivTemplate">
    <div style="height: 50px;">
        <input type="text" class="form-control" name="values" style="width: 200px;margin-bottom: 5px;float: left;">
        <h3 style="float: left;margin: 0;">
            <span class="label label-primary" style="cursor: pointer;" onclick="deleteValue(this,0)">-</span>
        </h3>
    </div>
</script>

</body>
</html>







